<template>
  <dv-border-box-8 style="padding-top: 10px">
    <dv-decoration-7 style="width:100%;height:30px;">库存预警</dv-decoration-7>
    <div style="height: 250px;width: 100%;padding: 5px">
      <dv-scroll-board :config="config"/>
    </div>
  </dv-border-box-8>


</template>

<script>

import {listInventory} from "@/api/dv/carbon";

export default {
  name: "Inventory",
  data() {
    return {
      config: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      listInventory({pageNum: 1, pageSize: 20}).then(response => {
        this.config = {
          header: ['编号', '物料', '仓库', '库存', '状态'],
          data: [],
          align: ['center'],
          rowNum: 5,
          headerBGC: '#1981f6',
          headerHeight: 45,
          oddRowBGC: 'rgba(0, 44, 81, 0.8)',
          evenRowBGC: 'rgba(10, 29, 50, 0.8)'
        }
        let data = response.rows;
        data.forEach((item, index) => {
          this.config.data.push([
            index + 1,
            item.materialName,
            item.warehouseName,
            item.totalInventory,
            this.getStatus(item)
          ])
        })
      });
    },
    getStatus(row) {
      if (row.inventoryLower && row.totalInventory < row.inventoryLower) {
        return '<span style="color:green;">不足</span>';
      }
      if (row.inventoryLimit && row.totalInventory > row.inventoryLimit) {
        return '<span style="color:red;">溢出</span>';
      }
      return '正常';
    }
  },
  mounted() {

  },
}
</script>

<style lang="scss" scoped>

</style>
